<template>
    <div>
        <van-tabs>
            <van-tab v-for=" (item, index ) in listw" :key="index" :title="item.title">
                <div class="listscroller">
                    <div class="scroll-container">
                        <span v-for="item in listw" :key="listw.id">{{ item.title }}</span>
                    </div>
                </div>
                <div class="productList">
                    <div @click="toDetailPage(item.id)" v-for="(item, index) in listz" :key="index">
                        <img :src="item.img" alt="">
                        <div>西安出发自由行</div>
                        <div>{{ item.title }}</div>
                        <span>￥{{ item.price }}</span>起/人
                    </div>
                    <div>2</div>
                    <div>3</div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { quot, Product } from '@/api/guo/ferrMain'
export default {
    data() {
        return {
            // 数据
            listw: [],
            listz: []
        }
    },
    mounted() {
        this.quotapis(),
            this.productapis()


    },
    methods: {
        toDetailPage(id) {
            // 跳转到详情页
            this.$router.push({ name: 'DetailPage', params: { id: id } })
        },
        async quotapis() {//首页第一个滑动的
            let { data } = await quot()
            // console.log(data)
            this.listw = data
        },
        async productapis() {//首页第一个滑动的
            let { data } = await Product()
            // console.log(data)
            this.listz = data
        },
    },

}
</script>

<style scoped lang="scss">
.listscroller {
    overflow-x: auto;
    white-space: nowrap;

    .scroll-container {
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;
    }

    span {
        display: inline-block;
        width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #a29f9f;
        margin: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

}

.productList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px;

    div {
        width: 49%;
        background-color: #F5F5F5;
        border-radius: 5px;

        img {
            width: 100%;
            height: 160px;
        }

        div:nth-child(3) {
            height: 60px;
            width: 100%;
            overflow: hidden;
        }
    }
}
</style>